<!--
 * @Description: 关注业务逻辑组件
 * @LastEditors: ZY
 * @LastEditTime: 2021-01-07 16:04:09
-->
<template>
  <div
    class="flex items-center cursor-pointer mr-3 pos-relative"
    style="z-index: 209"
    @mouseenter="showUnfollowConfirm = false"
  >
    <div class="dialog-item text-center" v-if="showUnfollowConfirm">
      <p class="py-3">确定取消关注吗？</p>
      <div class="flex justify-center">
        <el-button @click="showUnfollowConfirm = false" class="w-[45%]">取消</el-button>
        <el-button type="danger" @click="handleToggleFollow" class="w-[45%]"
          >确定取消关注吗</el-button
        >
      </div>
    </div>
    <el-tooltip
      v-if="isFollow"
      class="box-item"
      effect="dark"
      content="取消关注"
      placement="top-start"
      :disabled="showUnfollowConfirm"
    >
      <div
        style="display: inline-flex; align-items: center; cursor: pointer"
        @click="handleUnfollow(currItem)"
      >
        <el-icon color="red"><AlarmClock /></el-icon>
        <span class="text-3.5 ml-1">已关注</span>
      </div>
    </el-tooltip>
    <div
      v-else
      style="display: inline-flex; align-items: center"
      @click="handleToggleFollow"
    >
      <el-icon><AlarmClock /></el-icon>
      <span class="text-3.5 ml-1">关注</span>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, inject } from "vue";
import { AlarmClock } from "@element-plus/icons-vue";
import type { ProductItem } from "@/api/types/product";

const props = defineProps<{
  item: ProductItem;
  follow: boolean;
}>();
const isFollow =ref(props.follow);
const showUnfollowConfirm = ref(false);
const currItem = props.item;
const handleUnfollow = async (item: ProductItem) => {
  console.log("取消关注", item);
  // await toggleFollow(item.id,0);
  showUnfollowConfirm.value = true;
};
const handleToggleFollow = async () => {
  console.log("添加关注", currItem);
  // await toggleFollow(item.id,1);
  setTimeout(() => {
    isFollow.value = !isFollow.value;
    showUnfollowConfirm.value = false;
  }, 350);
};
// 添加/取消关注
const toggleFollow = (id: string, type: number) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, 500);
  });
};
</script>
<style scoped lang="scss">
.dialog-item {
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, -10%);
  width: 320px;
  min-height: 60px;
  padding: 10px 20px 20px 20px;
  background-color: #fff;
  border-radius: 10px;
  z-index: 9999;
}
</style>
